import {Modal, ModalProps, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {Button, Text} from 'tsun-smart-ui';
import NoticeIcon from '@/assets/icon/notice.svg';
import {NotificationVO} from '@/services/api/ads';
import {useMMKVString} from '@/hooks/useMMkv';
import {useEffect, useState} from 'react';
import {useTranslation} from 'react-i18next';
const NoticeContent = {
  'zh-CN': {
    content: 'notificationContent',
    title: 'notificationTitle',
  },
  'en-US': {
    content: 'enContent',
    title: 'enTitle',
  },
  'de-DE': {
    content: 'deContent',
    title: 'deTitle',
  },
} as const;
const Notice = ({
  visible,
  notice,
  onPress,
  ...props
}: ModalProps & {notice: NotificationVO[]; onPress: () => void}) => {
  const {t} = useTranslation();
  const [language] = useMMKVString<keyof typeof NoticeContent>('language');
  const [title, setTitle] = useState<string>('');
  const [content, setContent] = useState<string>('');
  useEffect(() => {
    if (notice.length > 0) {
      const noticeVO = notice[0];
      setTitle(noticeVO[NoticeContent[language].title]);
      setContent(
        noticeVO[NoticeContent[language].content]
          .replace(
            '{startTime}',
            new Date(+noticeVO.startTimeMs).toLocaleString(),
          )
          .replace(
            '{startTime}',
            new Date(+noticeVO.endTimeMs).toLocaleString(),
          )
          .replace(/\s/g, ''),
      );
    }
  }, [notice, language]);

  return (
    <Modal
      visible={visible}
      animationType="fade"
      statusBarTranslucent
      navigationBarTranslucent
      {...props}>
      <View
        className="px-9 flex-1 flex-center"
        style={{
          backgroundColor: 'rgba(0, 0, 0, 0.3)',
        }}>
        <View style={{position: 'relative'}}>
          <LinearGradient
            colors={['#ffe8d3', '#fbefe5', '#ffffff', '#ffffff']}
            start={{x: 0.5, y: 0}} // 顶部中心
            end={{x: 0.5, y: 1}} // 底部中心
            style={{
              borderRadius: 16,
            }}
            locations={[0, 0.17, 0.37, 1]} // 对应 CSS 里的百分比位置
          >
            <View className="px-8 pt-[52] pb-6">
              <Text className="text-center mb-5" variant="cardTitle">
                {title}
              </Text>
              <Text
                style={{
                  fontSize: 14,
                }}>
                {content.split('\\n').map((line, index, array) => (
                  <Text key={index} style={{lineHeight: 24, fontSize: 14}}>
                    {line}
                    {index < array.length - 1 && '\n'}
                  </Text>
                ))}
              </Text>
              <Button
                className="mt-8 self-center"
                size="medium"
                style={{
                  minWidth: 165,
                }}
                title={t('dytable.submit')}
                onPress={onPress}></Button>
            </View>
          </LinearGradient>
          <NoticeIcon
            style={{
              position: 'absolute',
              top: -44,
              width: 88,
              height: 88,
              alignSelf: 'center',
              zIndex: 30,
            }}
          />
        </View>
      </View>
    </Modal>
  );
};

export default Notice;
